import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { getQuestionMessageAction } from '../../store/questionStore/actionCreators';
import { Table, Tag, Space, Divider, Button, Modal, Spin, message } from 'antd';
import { deleteQuestionRequest } from '../../services/Admin';

export default memo(function QuestionManage() {
    const {questionMessage} = useSelector(state => ({
        questionMessage: state.getIn(["questions","questionMessage"])
    }), shallowEqual)

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getQuestionMessageAction());
        // console.log(questionMessage);
    }, [dispatch, questionMessage]);

    //相关自定义状态
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [currentDeleteQuestion, setCurrentDeleteQuestion] = useState({});
    const [isReload, setIsReload ] = useState(false);

    //重新刷新页面
    useEffect(() => {

    }, [isReload]);

    //删除文章的回调
    const deleteQuestion = (text, record) => {
      console.log('deletequestion');
      setCurrentDeleteQuestion(text);
      setIsVisable(true);
    }

    //弹窗确认
    const onOk = () => {
      console.log('ok');
      setIsLoading(true);
      deleteQuestionRequest(currentDeleteQuestion.q_id).then(res => {
        setIsLoading(false);
        setIsVisable(false);

        if(res.code === 200)
        {
          message.success("问题删除成功!");
          setIsReload(true);
        }
        else
        {
          message.error("问题删除失败！");
        }
      }).catch(err => {
        setIsLoading(false);
        setIsVisable(false);
        message.error("问题删除失败!")

      })
    }


    //弹窗取消
    const onCancel = () => {
      console.log('cancel');
      setIsVisable(false);
    }







    const columns = [
        {
          title: '问题ID',
          dataIndex: 'q_id',
          key: 'q_id',
          render: text => <a href={'##'}>{text}</a>
            ,
        },
        {
            title: '问题描述',
            dataIndex: 'q_description',
            key: 'q_description',
        },
        {
            title: '问题主题',
            dataIndex: 'q_theme_id',
            key: 'q_theme_id',
            render: theme => {
              return (
                <>{theme.q_theme_name}</>)
            }
          },
        {
          title: '回复量',
          dataIndex: 'q_answer_count',
          key: 'q_answer_count',
          render: count => {
                let color = 'blue';
                if(count>1000)
                {
                    color = 'red';
                }
                return (
                    <>
                        <Tag color={color} key={count}>
                        {count}
                    </Tag>
                    </>
                )
            }
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              {/* <a href={'###'}>修改</a> */}
              <Button type="link" onClick={e => deleteQuestion(text,record)}>删除</Button>
            </Space>
          ),
        },
      ];


    return (
        <div>
            <Divider orientation="left">问题管理页</Divider>
            <div>
                <Table columns={columns} dataSource={questionMessage} style={{minHeigh:"100%"}}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              okText="确认"
              cancelText="取消"
              
            >
              <p>是否确认删除该问题?</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})